<script setup>
let str = 'Hello World'
let num = 100
let age = 19
let bool = true
let bee = '蜜 蜂'
let arr = [{ name: "可乐", price: 3, count: 20 }, { name: "薯片", price: 6, count: 15 }]
function totalPrice() {
 let count = 0;
  for (let index in arr) { 
    count += arr[index].price * arr[index].count;
  }
    return count;
}

</script>

<template>
  <div>
    <!-- 插值表达式调用普通数据 -->
    <h1>str = {{ str }}</h1>
    <h2>num = {{ num }}</h2>
    <h3>bool = {{ bool }}</h3>
    <!-- 插值表达式调用运算符-->
    年龄： {{ age }}， 是否成年：{{age >= 18 ? '成年' : '未成年' }}<br>
    <!-- 插值表达式调用数组 -->
     商品：{{ arr[0].name }} 单价：{{ arr[0].price }} 数量：{{ arr[0].count }}<br>
    <!-- 插值表达式调用函数 -->
    商品总价：{{ totalPrice()  }}<br>
    <!-- 插值表达式调用API -->
    {{ bee.split(' ').reverse().join('') }}

  </div>
  
</template>

<style scoped>

</style>
